<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>StoryGenius - AI生成故事管理系统</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            dark: '#1D2939',
            light: '#F9FAFB',
            'gray-light': '#F3F4F6',
            'gray-medium': '#9CA3AF',
            'gray-dark': '#4B5563'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .btn-primary {
        @apply bg-primary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg transform hover:-translate-y-0.5;
      }
      .btn-secondary {
        @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-secondary/90 hover:shadow-lg transform hover:-translate-y-0.5;
      }
      .btn-outline {
        @apply border border-primary text-primary px-6 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-primary/10;
      }
    }
  </style>
  
  <style>
    /* 全局动画定义 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-fade-in {
      animation: fadeIn 0.6s ease forwards;
    }
    
    .story-card {
      transition: all 0.3s ease;
    }
    
    .story-card:hover {
      transform: translateY(-5px);
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 加载动画 */
    .loader {
      border-top-color: #165DFF;
      animation: spinner 0.6s linear infinite;
    }
    
    @keyframes spinner {
      to { transform: rotate(360deg); }
    }
  </style>
</head>

<body class="font-inter bg-light text-dark antialiased">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/95 shadow-sm backdrop-blur-sm">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center py-4">
        <!-- Logo -->
        <a href="#" class="flex items-center space-x-2">
          <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
            <i class="fa fa-book text-xl"></i>
          </div>
          <span class="text-xl font-bold text-primary">StoryGenius</span>
        </a>
        
        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#home" class="font-medium hover:text-primary transition-colors">首页</a>
          <a href="#discover" class="font-medium hover:text-primary transition-colors">发现故事</a>
          <a href="#generate" class="font-medium hover:text-primary transition-colors">生成故事</a>
          <a href="#rankings" class="font-medium hover:text-primary transition-colors">排行榜</a>
        </nav>
        
        <!-- 用户操作 -->
        <div class="flex items-center space-x-4">
          <button class="hidden sm:block btn-outline text-sm">登录</button>
          <button class="btn-primary text-sm">注册</button>
          
          <!-- 移动端菜单按钮 -->
          <button id="menu-toggle" class="md:hidden text-dark hover:text-primary">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-white border-t animate-fade-in">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#home" class="block py-2 font-medium hover:text-primary transition-colors">首页</a>
        <a href="#discover" class="block py-2 font-medium hover:text-primary transition-colors">发现故事</a>
        <a href="#generate" class="block py-2 font-medium hover:text-primary transition-colors">生成故事</a>
        <a href="#rankings" class="block py-2 font-medium hover:text-primary transition-colors">排行榜</a>
        <a href="#" class="block py-2 font-medium hover:text-primary transition-colors">登录</a>
      </div>
    </div>
  </header>

  <main>
    <!-- 英雄区域 -->
    <section id="home" class="pt-28 pb-20 md:pt-36 md:pb-28 bg-gradient-to-br from-primary/5 to-primary/10">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 md:pr-12 animate-fade-in" style="animation-delay: 0.1s">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-6">
              释放你的<span class="text-primary">故事创意</span><br>
              AI助你轻松创作
            </h1>
            <p class="text-lg text-gray-dark mb-8 max-w-lg">
              只需输入几个关键词，AI就能为你生成完整、精彩的故事。从奇幻冒险到浪漫爱情，让创意无限延伸。
            </p>
            <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
              <a href="#generate" class="btn-primary text-center">
                <i class="fa fa-magic mr-2"></i>开始创作
              </a>
              <a href="#discover" class="btn-outline text-center">
                <i class="fa fa-compass mr-2"></i>探索故事
              </a>
            </div>
            
            <div class="mt-10 flex items-center">
              <div class="flex -space-x-2">
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <img src="https://picsum.photos/id/66/100/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                <div class="w-10 h-10 rounded-full bg-primary/10 border-2 border-white flex items-center justify-center text-primary text-xs font-medium">
                  1k+
                </div>
              </div>
              <div class="ml-4">
                <div class="flex items-center text-yellow-400 mb-1">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star-half-o"></i>
                  <span class="ml-1 text-gray-dark">4.8/5</span>
                </div>
                <p class="text-sm text-gray-dark">来自1000+用户的好评</p>
              </div>
            </div>
          </div>
          
          <div class="md:w-1/2 mt-12 md:mt-0 animate-fade-in" style="animation-delay: 0.3s">
            <div class="relative">
              <div class="absolute -top-4 -left-4 w-24 h-24 bg-secondary/20 rounded-full filter blur-xl"></div>
              <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary/20 rounded-full filter blur-xl"></div>
              <img src="https://picsum.photos/id/24/600/400" alt="AI生成故事展示" class="w-full h-auto rounded-2xl shadow-xl relative z-10">
              
              <!-- 悬浮元素 -->
              <div class="absolute top-6 -right-4 md:right-6 bg-white p-3 rounded-xl shadow-lg z-20 hidden md:block">
                <div class="flex items-center space-x-2">
                  <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                    <i class="fa fa-line-chart"></i>
                  </div>
                  <div>
                    <p class="text-xs text-gray-medium">故事增长</p>
                    <p class="font-semibold">+24% 本周</p>
                  </div>
                </div>
              </div>
              
              <div class="absolute -bottom-4 left-8 md:left-12 bg-white p-3 rounded-xl shadow-lg z-20">
                <div class="flex items-center space-x-2">
                  <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
                    <i class="fa fa-users"></i>
                  </div>
                  <div>
                    <p class="text-xs text-gray-medium">活跃用户</p>
                    <p class="font-semibold">10,000+</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 特色功能 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">强大功能，轻松创作</h2>
          <p class="text-gray-dark text-lg">我们提供全方位的故事创作与管理工具，让你的创意之旅更加顺畅</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 功能卡片1 -->
          <div class="bg-gray-light rounded-2xl p-6 card-hover">
            <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-5">
              <i class="fa fa-magic text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">AI智能生成</h3>
            <p class="text-gray-dark">输入关键词、主题或类型，AI立即为你生成独特的故事内容，激发创作灵感。</p>
          </div>
          
          <!-- 功能卡片2 -->
          <div class="bg-gray-light rounded-2xl p-6 card-hover">
            <div class="w-14 h-14 bg-secondary/10 rounded-xl flex items-center justify-center text-secondary mb-5">
              <i class="fa fa-pencil text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">专业编辑工具</h3>
            <p class="text-gray-dark">强大的编辑功能，支持修改故事细节、调整情节走向，打造专属你的完美故事。</p>
          </div>
          
          <!-- 功能卡片3 -->
          <div class="bg-gray-light rounded-2xl p-6 card-hover">
            <div class="w-14 h-14 bg-green-500/10 rounded-xl flex items-center justify-center text-green-500 mb-5">
              <i class="fa fa-share-alt text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">社交互动分享</h3>
            <p class="text-gray-dark">与其他创作者互动，获取反馈，分享你的作品到各大社交平台，扩大影响力。</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 故事生成器 -->
    <section id="generate" class="py-20 bg-gray-light">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden">
          <div class="p-8 md:p-10">
            <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold mb-6">创建你的AI故事</h2>
            <p class="text-gray-dark mb-8">输入故事的关键元素，AI将为你生成一个完整的故事。你可以之后进行编辑和修改。</p>
            
            <form id="story-generator-form" class="space-y-6">
              <!-- 故事标题 -->
              <div>
                <label for="story-title" class="block text-sm font-medium text-gray-dark mb-2">故事标题（可选）</label>
                <input type="text" id="story-title" placeholder="给你的故事起个标题" class="w-full px-4 py-3 rounded-lg border border-gray-medium/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
              </div>
              
              <!-- 关键词 -->
              <div>
                <label for="story-keywords" class="block text-sm font-medium text-gray-dark mb-2">关键词（必填）</label>
                <input type="text" id="story-keywords" placeholder="例如：太空、冒险、机器人、友谊" class="w-full px-4 py-3 rounded-lg border border-gray-medium/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                <p class="mt-1 text-xs text-gray-medium">输入多个关键词，用逗号分隔</p>
              </div>
              
              <!-- 故事类型 -->
              <div>
                <label class="block text-sm font-medium text-gray-dark mb-2">故事类型</label>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                  <label class="cursor-pointer">
                    <input type="radio" name="story-type" value="fantasy" class="hidden peer">
                    <div class="text-center p-3 rounded-lg border border-gray-medium/30 peer-checked:border-primary peer-checked:bg-primary/5 transition-all">
                      <i class="fa fa-dragon text-primary mb-1"></i>
                      <p class="text-sm">奇幻</p>
                    </div>
                  </label>
                  
                  <label class="cursor-pointer">
                    <input type="radio" name="story-type" value="sci-fi" class="hidden peer">
                    <div class="text-center p-3 rounded-lg border border-gray-medium/30 peer-checked:border-primary peer-checked:bg-primary/5 transition-all">
                      <i class="fa fa-rocket text-primary mb-1"></i>
                      <p class="text-sm">科幻</p>
                    </div>
                  </label>
                  
                  <label class="cursor-pointer">
                    <input type="radio" name="story-type" value="adventure" class="hidden peer">
                    <div class="text-center p-3 rounded-lg border border-gray-medium/30 peer-checked:border-primary peer-checked:bg-primary/5 transition-all">
                      <i class="fa fa-compass text-primary mb-1"></i>
                      <p class="text-sm">冒险</p>
                    </div>
                  </label>
                  
                  <label class="cursor-pointer">
                    <input type="radio" name="story-type" value="romance" class="hidden peer">
                    <div class="text-center p-3 rounded-lg border border-gray-medium/30 peer-checked:border-primary peer-checked:bg-primary/5 transition-all">
                      <i class="fa fa-heart text-primary mb-1"></i>
                      <p class="text-sm">爱情</p>
                    </div>
                  </label>
                </div>
              </div>
              
              <!-- 故事长度 -->
              <div>
                <label for="story-length" class="block text-sm font-medium text-gray-dark mb-2">故事长度</label>
                <select id="story-length" class="w-full px-4 py-3 rounded-lg border border-gray-medium/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all appearance-none bg-white">
                  <option value="short">短篇（300-500字）</option>
                  <option value="medium" selected>中篇（800-1200字）</option>
                  <option value="long">长篇（2000字以上）</option>
                </select>
              </div>
              
              <!-- 生成按钮 -->
              <button type="button" id="generate-story-btn" class="w-full btn-primary flex items-center justify-center">
                <i class="fa fa-magic mr-2"></i>生成故事
              </button>
            </form>
          </div>
          
          <!-- 生成结果预览区 -->
          <div id="story-result" class="hidden bg-gray-50 p-8 md:p-10 border-t border-gray-100">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-xl font-bold">故事生成结果</h3>
              <div class="flex space-x-2">
                <button class="p-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors" title="保存故事">
                  <i class="fa fa-save"></i>
                </button>
                <button class="p-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors" title="编辑故事">
                  <i class="fa fa-edit"></i>
                </button>
                <button class="p-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors" title="分享故事">
                  <i class="fa fa-share-alt"></i>
                </button>
              </div>
            </div>
            
            <div class="prose max-w-none">
              <h4 id="generated-story-title" class="text-2xl font-bold mb-4">星际探险家莉莉</h4>
              <div id="generated-story-content" class="text-gray-dark leading-relaxed">
                <p>在遥远的28世纪，年轻的星际探险家莉莉驾驶着她的小型飞船"星辰号"穿越银河系。她的任务是寻找适合人类居住的新行星，以缓解地球日益增长的人口压力。</p>
                <p>一天，莉莉的探测器发现了一颗从未被记录的蓝色星球。这颗星球拥有与地球相似的大气层和液态水，看起来是一个完美的候选者。当她的飞船进入轨道时，一个神秘的信号出现在她的控制台屏幕上。</p>
                <p>"欢迎你，远方的旅行者。"信号转换成了通用语，"我们已经等待你的到来很久了。"</p>
                <p>莉莉感到既惊讶又兴奋。她回复道："我是来自地球的探险家莉莉，我为和平而来。"</p>
                <p>很快，一艘银色的飞碟出现在"星辰号"旁边，邀请莉莉进行会面。她接受了邀请，准备开始一段改变她一生的冒险...</p>
              </div>
            </div>
            
            <div class="mt-8 flex space-x-4">
              <button class="btn-outline flex-1">继续生成</button>
              <button class="btn-primary flex-1">进入编辑器</button>
            </div>
          </div>
          
          <!-- 加载状态 -->
          <div id="loading-state" class="hidden bg-gray-50 p-10 border-t border-gray-100 flex flex-col items-center justify-center">
            <div class="w-12 h-12 rounded-full border-4 border-gray-200 loader mb-4"></div>
            <p class="text-gray-dark">AI正在为你创作精彩故事...</p>
            <p class="text-sm text-gray-medium mt-2">这可能需要几秒钟时间</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 发现故事 -->
    <section id="discover" class="py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-10">
          <div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-3">发现精彩故事</h2>
            <p class="text-gray-dark">探索由AI和创作者共同打造的精彩故事</p>
          </div>
          
          <div class="mt-4 md:mt-0 flex items-center space-x-2">
            <button class="px-4 py-2 rounded-lg bg-primary text-white">全部</button>
            <button class="px-4 py-2 rounded-lg bg-gray-light hover:bg-gray-200 transition-colors">奇幻</button>
            <button class="px-4 py-2 rounded-lg bg-gray-light hover:bg-gray-200 transition-colors">科幻</button>
            <button class="px-4 py-2 rounded-lg bg-gray-light hover:bg-gray-200 transition-colors">冒险</button>
            <button class="px-4 py-2 rounded-lg bg-gray-light hover:bg-gray-200 transition-colors hidden sm:block">爱情</button>
          </div>
        </div>
        
        <!-- 故事卡片网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- 故事卡片1 -->
          <div class="story-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
            <div class="relative">
              <img src="https://picsum.photos/id/237/400/200" alt="故事封面：魔法森林的秘密" class="w-full h-48 object-cover">
              <div class="absolute top-3 left-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded">奇幻</div>
            </div>
            <div class="p-5">
              <h3 class="font-bold text-lg mb-2 line-clamp-2">魔法森林的秘密</h3>
              <p class="text-gray-dark text-sm mb-4 line-clamp-3">在一片被遗忘的魔法森林里，一个年轻的精灵必须找到失落的宝石，以拯救她的家园免受黑暗势力的侵袭...</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                  <span class="text-xs text-gray-medium">精灵创作者</span>
                </div>
                <div class="flex items-center text-gray-medium text-sm">
                  <i class="fa fa-heart-o mr-1"></i> 128
                  <i class="fa fa-comment-o ml-3 mr-1"></i> 24
                </div>
              </div>
            </div>
          </div>
          
          <!-- 故事卡片2 -->
          <div class="story-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
            <div class="relative">
              <img src="https://picsum.photos/id/1/400/200" alt="故事封面：火星殖民地" class="w-full h-48 object-cover">
              <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">科幻</div>
            </div>
            <div class="p-5">
              <h3 class="font-bold text-lg mb-2 line-clamp-2">火星殖民地</h3>
              <p class="text-gray-dark text-sm mb-4 line-clamp-3">2077年，第一批火星殖民者发现了一个令人震惊的秘密——这颗红色星球上曾经存在过高度发达的文明...</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                  <span class="text-xs text-gray-medium">星际旅行者</span>
                </div>
                <div class="flex items-center text-gray-medium text-sm">
                  <i class="fa fa-heart-o mr-1"></i> 95
                  <i class="fa fa-comment-o ml-3 mr-1"></i> 18
                </div>
              </div>
            </div>
          </div>
          
          <!-- 故事卡片3 -->
          <div class="story-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
            <div class="relative">
              <img src="https://picsum.photos/id/15/400/200" alt="故事封面：失落的古城" class="w-full h-48 object-cover">
              <div class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">冒险</div>
            </div>
            <div class="p-5">
              <h3 class="font-bold text-lg mb-2 line-clamp-2">失落的古城</h3>
              <p class="text-gray-dark text-sm mb-4 line-clamp-3">一群勇敢的探险家深入亚马逊雨林，寻找传说中失落的黄金城。但他们不知道，这座城市守护着一个足以改变世界的秘密...</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                  <span class="text-xs text-gray-medium">探险队长</span>
                </div>
                <div class="flex items-center text-gray-medium text-sm">
                  <i class="fa fa-heart-o mr-1"></i> 210
                  <i class="fa fa-comment-o ml-3 mr-1"></i> 36
                </div>
              </div>
            </div>
          </div>
          
          <!-- 故事卡片4 -->
          <div class="story-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
            <div class="relative">
              <img src="https://picsum.photos/id/26/400/200" alt="故事封面：雨中的邂逅" class="w-full h-48 object-cover">
              <div class="absolute top-3 left-3 bg-pink-500 text-white text-xs font-bold px-2 py-1 rounded">爱情</div>
            </div>
            <div class="p-5">
              <h3 class="font-bold text-lg mb-2 line-clamp-2">雨中的邂逅</h3>
              <p class="text-gray-dark text-sm mb-4 line-clamp-3">在一个下雨的午后，两个陌生人因一把伞而相遇。他们不知道，这次看似偶然的邂逅，将改变他们的一生...</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/62/100/100" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                  <span class="text-xs text-gray-medium">浪漫诗人</span>
                </div>
                <div class="flex items-center text-gray-medium text-sm">
                  <i class="fa fa-heart-o mr-1"></i> 156
                  <i class="fa fa-comment-o ml-3 mr-1"></i> 42
                </div>
              </div>
            </div>
          </div>
          
          <!-- 故事卡片5 -->
          <div class="story-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
            <div class="relative">
              <img src="https://picsum.photos/id/96/400/200" alt="故事封面：龙骑士的传承" class="w-full h-48 object-cover">
              <div class="absolute top-3 left-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded">奇幻</div>
            </div>
            <div class="p-5">
              <h3 class="font-bold text-lg mb-2 line-clamp-2">龙骑士的传承</h3>
              <p class="text-gray-dark text-sm mb-4 line-clamp-3">一个普通的乡村男孩发现自己是最后一位龙骑士的后裔，他必须接受训练，以对抗即将到来的黑暗时代...</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/55/100/100" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                  <span class="text-xs text-gray-medium">屠龙者</span>
                </div>
                <div class="flex items-center text-gray-medium text-sm">
                  <i class="fa fa-heart-o mr-1"></i> 189
                  <i class="fa fa-comment-o ml-3 mr-1"></i> 29
                </div>
              </div>
            </div>
          </div>
          
          <!-- 故事卡片6 -->
          <div class="story-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
            <div class="relative">
              <img src="https://picsum.photos/id/60/400/200" alt="故事封面：时间旅行者" class="w-full h-48 object-cover">
              <div class="absolute top-3 left-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">科幻</div>
            </div>
            <div class="p-5">
              <h3 class="font-bold text-lg mb-2 line-clamp-2">时间旅行者</h3>
              <p class="text-gray-dark text-sm mb-4 line-clamp-3">一位科学家发明了时间机器，但每次旅行都会引发意想不到的后果。他必须修复自己造成的时间悖论...</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/33/100/100" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                  <span class="text-xs text-gray-medium">时空博士</span>
                </div>
                <div class="flex items-center text-gray-medium text-sm">
                  <i class="fa fa-heart-o mr-1"></i> 142
                  <i class="fa fa-comment-o ml-3 mr-1"></i> 31
                </div>
              </div>
            </div>
          </div>
          
          <!-- 故事卡片7 -->
          <div class="story-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
            <div class="relative">
              <img src="https://picsum.photos/id/61/400/200" alt="故事封面：深海探险" class="w-full h-48 object-cover">
              <div class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">冒险</div>
            </div>
            <div class="p-5">
              <h3 class="font-bold text-lg mb-2 line-clamp-2">深海探险</h3>
              <p class="text-gray-dark text-sm mb-4 line-clamp-3">一支深海考察队下潜到马里亚纳海沟，发现了一个从未被人类见过的海底世界和神秘生物...</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/22/100/100" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                  <span class="text-xs text-gray-medium">海洋学家</span>
                </div>
                <div class="flex items-center text-gray-medium text-sm">
                  <i class="fa fa-heart-o mr-1"></i> 105
                  <i class="fa fa-comment-o ml-3 mr-1"></i> 17
                </div>
              </div>
            </div>
          </div>
          
          <!-- 故事卡片8 -->
          <div class="story-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
            <div class="relative">
              <img src="https://picsum.photos/id/28/400/200" alt="故事封面：跨越时空的爱恋" class="w-full h-48 object-cover">
              <div class="absolute top-3 left-3 bg-pink-500 text-white text-xs font-bold px-2 py-1 rounded">爱情</div>
            </div>
            <div class="p-5">
              <h3 class="font-bold text-lg mb-2 line-clamp-2">跨越时空的爱恋</h3>
              <p class="text-gray-dark text-sm mb-4 line-clamp-3">一个生活在现代的女孩，通过一面古老的镜子，与19世纪的一位年轻画家产生了奇妙的联系...</p>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <img src="https://picsum.photos/id/63/100/100" alt="用户头像" class="w-6 h-6 rounded-full mr-2">
                  <span class="text-xs text-gray-medium">时光恋人</span>
                </div>
                <div class="flex items-center text-gray-medium text-sm">
                  <i class="fa fa-heart-o mr-1"></i> 203
                  <i class="fa fa-comment-o ml-3 mr-1"></i> 56
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="text-center mt-12">
          <button class="btn-outline">
            <i class="fa fa-refresh mr-2"></i>加载更多故事
          </button>
        </div>
      </div>
    </section>
    
    <!-- 排行榜 -->
    <section id="rankings" class="py-20 bg-gradient-to-br from-primary/5 to-primary/10">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">热门故事排行榜</h2>
          <p class="text-gray-dark text-lg">看看大家都在阅读和讨论哪些精彩故事</p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- 左侧：周榜 -->
          <div class="bg-white rounded-2xl shadow-sm p-6 lg:col-span-2">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-xl font-bold">本周热门</h3>
              <div class="flex space-x-2">
                <button class="px-3 py-1 rounded-lg bg-primary text-white text-sm">周榜</button>
                <button class="px-3 py-1 rounded-lg bg-gray-light hover:bg-gray-200 text-sm transition-colors">月榜</button>
                <button class="px-3 py-1 rounded-lg bg-gray-light hover:bg-gray-200 text-sm transition-colors">总榜</button>
              </div>
            </div>
            
            <div class="space-y-4">
              <!-- 排名1 -->
              <div class="flex items-center p-3 rounded-xl bg-primary/5 border border-primary/20">
                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold mr-4">1</div>
                <img src="https://picsum.photos/id/15/100/100" alt="故事封面" class="w-16 h-16 object-cover rounded-lg mr-4">
                <div class="flex-1">
                  <h4 class="font-bold">失落的古城</h4>
                  <p class="text-sm text-gray-medium">探险队长</p>
                </div>
                <div class="text-right">
                  <p class="font-bold text-primary">9872 阅读</p>
                  <p class="text-sm text-gray-medium">冒险</p>
                </div>
              </div>
              
              <!-- 排名2 -->
              <div class="flex items-center p-3 rounded-xl bg-gray-light">
                <div class="w-8 h-8 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold mr-4">2</div>
                <img src="https://picsum.photos/id/28/100/100" alt="故事封面" class="w-16 h-16 object-cover rounded-lg mr-4">
                <div class="flex-1">
                  <h4 class="font-bold">跨越时空的爱恋</h4>
                  <p class="text-sm text-gray-medium">时光恋人</p>
                </div>
                <div class="text-right">
                  <p class="font-bold">8541 阅读</p>
                  <p class="text-sm text-gray-medium">爱情</p>
                </div>
              </div>
              
              <!-- 排名3 -->
              <div class="flex items-center p-3 rounded-xl bg-gray-light">
                <div class="w-8 h-8 rounded-full bg-amber-600 text-white flex items-center justify-center font-bold mr-4">3</div>
                <img src="https://picsum.photos/id/96/100/100" alt="故事封面" class="w-16 h-16 object-cover rounded-lg mr-4">
                <div class="flex-1">
                  <h4 class="font-bold">龙骑士的传承</h4>
                  <p class="text-sm text-gray-medium">屠龙者</p>
                </div>
                <div class="text-right">
                  <p class="font-bold">7329 阅读</p>
                  <p class="text-sm text-gray-medium">奇幻</p>
                </div>
              </div>
              
              <!-- 排名4 -->
              <div class="flex items-center p-3 rounded-xl bg-gray-light">
                <div class="w-8 h-8 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold mr-4">4</div>
                <img src="https://picsum.photos/id/60/100/100" alt="故事封面" class="w-16 h-16 object-cover rounded-lg mr-4">
                <div class="flex-1">
                  <h4 class="font-bold">时间旅行者</h4>
                  <p class="text-sm text-gray-medium">时空博士</p>
                </div>
                <div class="text-right">
                  <p class="font-bold">6853 阅读</p>
                  <p class="text-sm text-gray-medium">科幻</p>
                </div>
              </div>
              
              <!-- 排名5 -->
              <div class="flex items-center p-3 rounded-xl bg-gray-light">
                <div class="w-8 h-8 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold mr-4">5</div>
                <img src="https://picsum.photos/id/237/100/100" alt="故事封面" class="w-16 h-16 object-cover rounded-lg mr-4">
                <div class="flex-1">
                  <h4 class="font-bold">魔法森林的秘密</h4>
                  <p class="text-sm text-gray-medium">精灵创作者</p>
                </div>
                <div class="text-right">
                  <p class="font-bold">5921 阅读</p>
                  <p class="text-sm text-gray-medium">奇幻</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 右侧：数据统计 -->
          <div class="bg-white rounded-2xl shadow-sm p-6">
            <h3 class="text-xl font-bold mb-6">平台数据</h3>
            
            <!-- 数据概览 -->
            <div class="grid grid-cols-2 gap-4 mb-8">
              <div class="bg-gray-light p-4 rounded-xl text-center">
                <p class="text-gray-medium text-sm">总故事数</p>
                <p class="text-2xl font-bold text-primary">12,587</p>
              </div>
              <div class="bg-gray-light p-4 rounded-xl text-center">
                <p class="text-gray-medium text-sm">活跃用户</p>
                <p class="text-2xl font-bold text-primary">10,342</p>
              </div>
              <div class="bg-gray-light p-4 rounded-xl text-center">
                <p class="text-gray-medium text-sm">总阅读量</p>
                <p class="text-2xl font-bold text-primary">248k+</p>
              </div>
              <div class="bg-gray-light p-4 rounded-xl text-center">
                <p class="text-gray-medium text-sm">今日新增</p>
                <p class="text-2xl font-bold text-primary">156</p>
              </div>
            </div>
            
            <!-- 故事类型分布 -->
            <div>
              <h4 class="font-bold mb-4">故事类型分布</h4>
              <canvas id="storyTypeChart" width="400" height="300"></canvas>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 号召行动 -->
    <section class="py-20 bg-primary">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-6">准备好开始你的故事创作之旅了吗？</h2>
        <p class="text-white/80 text-lg max-w-2xl mx-auto mb-10">加入我们的创作者社区，释放你的想象力，让AI帮助你创作出令人惊叹的故事</p>
        <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
          <button class="bg-white text-primary px-8 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-gray-100 hover:shadow-lg transform hover:-translate-y-0.5">
            免费注册
          </button>
          <button class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-medium transition-all duration-300 hover:bg-white/10">
            了解更多
          </button>
        </div>
      </div>
    </section>
  </main>
  
  <!-- 页脚 -->
  <footer class="bg-dark text-white pt-16 pb-8">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
        <div>
          <div class="flex items-center space-x-2 mb-6">
            <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center text-primary">
              <i class="fa fa-book text-xl"></i>
            </div>
            <span class="text-xl font-bold">StoryGenius</span>
          </div>
          <p class="text-gray-400 mb-6">AI驱动的故事创作与分享平台，让每个人都能轻松创作精彩故事。</p>
          <div class="flex space-x-4">
            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-wechat"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-twitter"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary transition-colors">
              <i class="fa fa-facebook"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-6">快速链接</h4>
          <ul class="space-y-3">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">发现故事</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">生成故事</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">排行榜</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-6">帮助中心</h4>
          <ul class="space-y-3">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系客服</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">用户协议</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-bold mb-6">联系我们</h4>
          <ul class="space-y-3">
            <li class="flex items-start">
              <i class="fa fa-envelope-o text-gray-400 mt-1 mr-3"></i>
              <span class="text-gray-400">contact@storygenius.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-phone text-gray-400 mt-1 mr-3"></i>
              <span class="text-gray-400">400-123-4567</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-map-marker text-gray-400 mt-1 mr-3"></i>
              <span class="text-gray-400">北京市海淀区科技园区88号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm">
        <p>&copy; 2023 StoryGenius AI生成故事管理系统. 保留所有权利.</p>
      </div>
    </div>
  </footer>
  
  <!-- JavaScript -->
  <script>
    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    
    menuToggle.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
    
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('shadow-md');
        navbar.classList.remove('shadow-sm');
      } else {
        navbar.classList.remove('shadow-md');
        navbar.classList.add('shadow-sm');
      }
    });
    
    // 故事生成按钮点击事件
    const generateBtn = document.getElementById('generate-story-btn');
    const storyForm = document.getElementById('story-generator-form');
    const storyResult = document.getElementById('story-result');
    const loadingState = document.getElementById('loading-state');
    
    generateBtn.addEventListener('click', () => {
      // 简单验证
      const keywords = document.getElementById('story-keywords').value.trim();
      if (!keywords) {
        alert('请输入故事关键词');
        return;
      }
      
      // 显示加载状态
      storyResult.classList.add('hidden');
      loadingState.classList.remove('hidden');
      
      // 模拟AI生成延迟
      setTimeout(() => {
        loadingState.classList.add('hidden');
        storyResult.classList.remove('hidden');
        
        // 平滑滚动到结果区域
        storyResult.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 2000);
    });
    
    // 初始化故事类型分布图表
    window.addEventListener('load', () => {
      const ctx = document.getElementById('storyTypeChart').getContext('2d');
      
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['奇幻', '科幻', '冒险', '爱情', '其他'],
          datasets: [{
            data: [35, 25, 20, 15, 5],
            backgroundColor: [
              '#FF7D00', // 橙色 - 奇幻
              '#165DFF', // 蓝色 - 科幻
              '#22C55E', // 绿色 - 冒险
              '#EC4899', // 粉色 - 爱情
              '#9CA3AF'  // 灰色 - 其他
            ],
            borderWidth: 0,
            hoverOffset: 10
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                padding: 20,
                font: {
                  size: 12
                }
              }
            }
          },
          cutout: '70%'
        }
      });
    });
    
    // 为所有内部链接添加平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth'
          });
          
          // 如果是移动端，点击后关闭菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });
  </script>
</body>
</html>
